<template>
  <transition name="fade">
    <div class="media-wrapper" v-if="seeMedia">
      <Button type="text" class="media-close" shape="circle" icon="close" @click="close"></Button>
      <div class="media-controller">
        <Button-group shape='circle'>
          <Button size="large" type="ghost" icon="ios-skipbackward" @click.prevent="prev"></Button>
          <Button size="large" type="ghost" icon="ios-skipforward" @click.prevent="next"></Button>
        </Button-group>
      </div>
      <div class="media-content">
        <div v-for="(item,index) in data" :key="index" :class="type(index)">
          <img :src='item' v-if="isImg(item)" @click="toggle(index)">
          <video :src="item" v-else controls="controls" @click="toggle(index)">
          </video>
        </div>
      </div>
    </div>
    <div>
      <video :src="vide" controls="controls" style="height: 30rem;"/>
    </div>
  </transition>

</template>

<script>
  import vide from '@/test/browse/0.mp4';
  export default {
    name: 'videoShow',
    data: function () {
      return {
        vide:vide,
        nowIndex: 0,
        data: [
          '/src/test/browse/0.mp4', '/src/test/browse/1.jpg', '/src/test/browse/2.jpg'
        ]
      }
    },
    props: {
      // data:{
      //     type:Array
      // }
    },
    methods: {
      next() {
        if (this.nowIndex == this.data.length - 1) {
          this.$Message.warning('已到达最后一张');
        } else {
          this.nowIndex++;
        }
      },
      prev() {
        if (this.nowIndex == 0) {
          this.$Message.warning('已到达第一张');
        } else {
          this.nowIndex--;
        }
      },
      type(index) {
        if (index == this.nowIndex) {
          return 'media-center'
        } else if (index - this.nowIndex == 1) {
          return 'media-right'
        } else if (index - this.nowIndex == -1) {
          return 'media-left'
        } else {
          return 'media-hide'
        }
      },
      isImg(item) {
        var ext = item.substr(item.length - 3, 3);
        var flag = ext == ('jpg' || 'png' || 'gif') ? true : false;
        return flag;
      },
      toggle(index) {
        if (index - this.nowIndex == 1) {
          this.nowIndex++;
        } else if (index - this.nowIndex == -1) {
          this.nowIndex--;
        }
      },
      close() {
        this.$store.commit('SET_MEDIA', false);
        this.nowIndex = 0;
      }
    },
    computed: {
      seeMedia() {
        return this.$store.state.seeMedia;
      }
    }
  }
</script>
<style lang="less">
  .media-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.52);
    z-index: 1010;
    i {
      color: #fff
    }
    .media-controller {
      position: absolute;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%)
    }
    .media-close {
      position: absolute;
      right: 5px;
      top: 5px;
      i {
        font-size: 30px;
      }
    }
    .media-content {
      div {
        position: absolute;
        top: 50%;
        color: #fff;
        text-align: center;
        font-size: 30px;
        transition: all .56s ease;
        img {
          max-width: 100%;
          max-height: 100%
        }
        video {
          width: 100%;
        }
      }
      .media-center {
        height: 50%;
        width: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1011;
      }
      .media-left,
      .media-right {
        width: 25%;
        height: 35%;
        filter: grayscale(90%);
      }
      .media-right {
        left: 100%;
        transform: translate(-105%, -50%);
      }
      .media-left {
        left: 0;
        transform: translate(5%, -50%);
      }
      .media-hide {
        height: 0;
        width: 0;
        left: 50%;
        z-index: 1010;
        opacity: 0;
      }
    }
  }
</style>
